<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin: 0;padding: 0;list-style-type: none;}
            ul{width:880px;height: 110px;border: 5px solid #000;margin: 100px auto;}
            li{width: 100px;height: 100px;margin: 5px;float: left;}
            img{width: 100%;height:100%;}
            div{width:800px;height:450px;position: absolute;left: 0;top:0;display: none;}
        </style>
    </head>
    <body>
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
            </ul>
        <div >
            <img src="img/1.jpg" alt=""/>
        </div>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var ul_x=0;
            var ul_y=0;
            $("ul li").mousemove(function(ex){
               ul_x=ex.pageX+10;
               ul_y=ex.pageY+10;
               var src=$(this).children("img").prop("src");
               $("div img").prop("src",src);
               $("div").show();
               $("div").css({"left": ul_x,"top":ul_y});
               
            });
            $("ul li").mouseout(function(ex){
               $("div").hide(); 
            });
        </script>
    </body>
</html>
